/**
 * Created by 123 on 2017/12/7.
 * 问题集
 */

import React, {Component} from 'react';
import {
  View,
  Text,
  Picker,
  ScrollView,
  Button,
  TouchableOpacity,
  StyleSheet
} from 'react-native';
import {Actions,} from 'react-native-router-flux'
import {Accordion, List} from 'antd-mobile';
import HorizontalBody from '../rectifyBill/HorizontalBody';
import Color from '../../assets/colors'
import CheckBox from 'react-native-checkbox'
import Loading from '../../components/loading/loading'


class TroubleCollection extends Component {


  render() {
    const {thisTypeId,name,troubles, normList, queryTroubleCollectionItem, setTroubles, changeGradeName, seriousGrade ,thisBoxChecked,
      resetNormalList,thisChecked,typeId,allCheckBox,loading} = this.props;

    //
    let allCheck = '';
    let list = [];
    if(normList === undefined){
      allCheck = '全选';
    }else {
      if(normList.length ==0){
        allCheck = '全选';
      }else {
        for (let i in normList) {
          if (normList[i].thisChecked) {
          }else {
            list.push(normList[i])
          }
        }
        if (list.length > 0) {
          allCheck = '全选';
        } else {
          allCheck = '取消全选';
        }
      }
    }
    //

    return (
        <View style={{display:'flex',flex:1}}>
            {
                loading?<Loading />:
                    <View style={{ marginTop: 10, marginBottom: 10 ,display:'flex',flexDirection:'row',flex:1}}>
                        <View style={{flex:1,backgroundColor:Color.white,}}>
                            <ScrollView>
                                <Accordion openAnimation={{}} className="my-accordion" onChange={()=>{}}>
                                    {
                                        troubles.map((val, index) => (
                                            <Accordion.Panel header={val.name} key={index}>
                                                <List className="my-list">
                                                    {
                                                        val.children.map((val2, index2) => (
                                                            <List.Item style={{marginLeft:40}} onClick={()=>{queryTroubleCollectionItem(val2.id,val2.name)}}
                                                                       key={index2}>{val2.name}</List.Item>
                                                        ))
                                                    }
                                                </List>
                                            </Accordion.Panel>

                                        ))
                                    }
                                </Accordion>
                            </ScrollView>
                        </View>
                        <View style={{width:1,backgroundColor:Color.backgroundLightGray}}/>
                        <View style={{flex:2,backgroundColor:Color.white,marginLeft:10,marginRight:10}}>
                            {name.length ==0?null:
                                <View style={{marginTop:10,flexDirection: 'row',}}>
                                    <View style={styles.viewone}></View>
                                    <View style={styles.viewTwo}>
                                        <Text style={styles.text}>{name}</Text>
                                    </View>
                                </View>
                            }
                            <ScrollView>
                                {
                                    normList.map((val, index) => (
                                            <View key={index} style={{display:'flex',flexDirection:'column'}}>
                                                <View style={{display:'flex',flexDirection:'row'}}>
                                                    <View style={{marginTop:12,marginLeft:20}}>
                                                        <CheckBox
                                                            label=''
                                                            onChange={()=>{thisBoxChecked({typeId:val.typeId,id:val.id,thisChecked:val.thisChecked})}}
                                                            checked={val.thisChecked}
                                                        />
                                                    </View>
                                                    <View style={{flex:1}}>
                                                        <Text
                                                            style={{flex:1,fontSize:16,justifyContent: 'center',paddingTop:13,paddingLeft:10}}
                                                        >{`${val.content}`}</Text>
                                                        <Text
                                                            style={{flex:1,fontSize:16,justifyContent: 'flex-end',}}
                                                        >{`${val.according}`}</Text>
                                                    </View>


                                                    <Picker
                                                        onValueChange={(val)=>{changeGradeName({data:val,typeId:index})}}
                                                        prompt={'请选择'}
                                                        selectedValue={val.gradeName}
                                                        style={{width:200,height:50}}
                                                    >
                                                        {
                                                            seriousGrade.map((val, index) => (
                                                                <Picker.Item key={index} label={val.label} value={val.value}/>
                                                            ))
                                                        }

                                                    </Picker>
                                                </View>
                                                <View style={{backgroundColor:Color.backgroundLightGray,height:1,marginLeft:20,marginRight:20}}/>

                                            </View>

                                        )
                                    )

                                }

                                {normList.length ==0?null:
                                    <View style={{ flex:1,flexDirection: 'row'}}>
                                        {/*<View style={{flex:10}}><View>*/}
                                        {/*//*/}
                                        <TouchableOpacity onPress={() => {
                                                    allCheckBox(allCheck)
                                                  }}>
                                            <View style={styles.checkView1}>
                                                <Text style={styles.checkSureButton}>
                                                    {allCheck}
                                                </Text>
                                            </View>
                                        </TouchableOpacity>
                                        <View style={{flex: 10}}></View>
                                        {/*//*/}

                                        <TouchableOpacity onPress={()=>{
                                                    setTroubles()
                                                    Actions.pop()
                                                  // resetNormalList()
                                                }}>
                                            <View style={styles.checkView}>
                                                <Text style={styles.checkSureButton}>
                                                    选择
                                                </Text>
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                }

                            </ScrollView>

                        </View>
                    </View>
            }
        </View>
    )
  }
}

export default TroubleCollection;

const styles = StyleSheet.create({
    checkView:{
        flex:1,
        justifyContent: 'flex-end',
        backgroundColor:Color.btnPrimaryBg,
        marginTop:10,
        borderRadius: 3,
        borderColor:'rgba(0,0,0,0)',
        marginRight:20,
    },
  checkView1:{
    flex:1,
    marginLeft:20,
    justifyContent: 'flex-end',
    backgroundColor:Color.btnPrimaryBg,
    marginTop:10,
    borderRadius: 3,
    borderColor:'rgba(0,0,0,0)',
    marginRight:20,
  },
    checkSureButton:{
        color: 'white',
        fontSize: 18,
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 5,
        paddingBottom: 5,
        textAlign: 'center'
    },
    viewone:{
        width:'1%',
        backgroundColor:Color.navbarBackground,
        height:50,
        borderBottomLeftRadius:10,
        borderTopLeftRadius:10,
        marginLeft:20
    },
    viewTwo:{
        width:'98%',
        backgroundColor:Color.dataYellowBg,
        height:50,
        // borderBottomRightRadius:10,
        // borderTopRightRadius:10,
        paddingTop:7,
        paddingLeft:10
    },
    text:{
        fontSize:25,
    },
});
